<template>
  <div class="community-home">
    <!-- 搜索头部 -->
    <div class="search-header">
      <div class="search-box">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索帖子内容..."
          class="search-input"
          @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button type="primary" @click="handleSearch">
          搜索
        </el-button>
      </div>

      <!-- 用户UID搜索 -->
      <div class="uid-search-box">
        <el-input
          v-model="uidSearchKeyword"
          placeholder="搜索用户UID查看其帖子..."
          class="uid-search-input"
          @keyup.enter="handleUidSearch"
        >
          <template #prefix>
            <el-icon><User /></el-icon>
          </template>
        </el-input>
        <el-button type="success" @click="handleUidSearch" :loading="uidSearching">
          搜索用户
        </el-button>
      </div>
    </div>

    <!-- 搜索状态显示 -->
    <div v-if="searchState.show" class="search-state">
      <div class="search-state-content">
        <span class="search-state-text">{{ searchState.text }}</span>
        <el-button 
          v-if="searchState.showClear" 
          type="text" 
          @click="clearSearch"
          class="clear-search-btn"
        >
          清除搜索
        </el-button>
      </div>
    </div>

    <!-- 帖子类型筛选 -->
    <div class="filter-section">
      <div class="filter-container">
        <el-radio-group v-model="selectedPostType" @change="handlePostTypeChange">
          <el-radio-button label="all">全部帖子</el-radio-button>
          <el-radio-button label="farmer">农夫帖子</el-radio-button>
          <el-radio-button label="buyer">买家帖子</el-radio-button>
        </el-radio-group>
        
        <div class="post-stats">
          <el-tag type="success" v-if="selectedPostType === 'all'">
            共 {{ totalPostsCount }} 条帖子
          </el-tag>
          <el-tag type="success" v-else-if="selectedPostType === 'farmer'">
            农夫帖子 {{ farmerPostsCount }} 条
          </el-tag>
          <el-tag type="primary" v-else-if="selectedPostType === 'buyer'">
            买家帖子 {{ buyerPostsCount }} 条
          </el-tag>
        </div>
      </div>
    </div>

    <!-- 帖子列表 -->
    <div class="posts-container">
      <!-- 全部帖子 -->
      <div v-if="selectedPostType === 'all'" class="all-posts">
        <!-- 农夫帖子区域 -->
        <div class="post-section" v-if="filteredFarmerPosts.length > 0">
          <div class="section-header">
            <el-tag type="success" size="large" class="section-tag">
              <el-icon><User /></el-icon>
              农夫帖子
            </el-tag>
            <span class="section-count">{{ filteredFarmerPosts.length }} 条</span>
          </div>
          <div class="posts-list">
            <PostCard 
              v-for="post in filteredFarmerPosts" 
              :key="post.id"
              :post="post"
              :currentUser="currentUser"
              @like="handleLike"
              @dislike="handleDislike"
              @toggle-comments="toggleComments"
              @add-comment="handleAddComment"
              @add-reply="handleAddReply"
              @preview-image="previewImage"
              @follow-user="handleFollowUser"
              @view-user-profile="handleViewUserProfile"
            />
          </div>
        </div>

        <!-- 买家帖子区域 -->
        <div class="post-section" v-if="filteredBuyerPosts.length > 0">
          <div class="section-header">
            <el-tag type="primary" size="large" class="section-tag">
              <el-icon><ShoppingBag /></el-icon>
              买家帖子
            </el-tag>
            <span class="section-count">{{ filteredBuyerPosts.length }} 条</span>
          </div>
          <div class="posts-list">
            <PostCard 
              v-for="post in filteredBuyerPosts" 
              :key="post.id"
              :post="post"
              :currentUser="currentUser"
              @like="handleLike"
              @dislike="handleDislike"
              @toggle-comments="toggleComments"
              @add-comment="handleAddComment"
              @add-reply="handleAddReply"
              @preview-image="previewImage"
              @follow-user="handleFollowUser"
              @view-user-profile="handleViewUserProfile"
            />
          </div>
        </div>
      </div>

      <!-- 仅农夫帖子 -->
      <div v-else-if="selectedPostType === 'farmer'" class="single-type-posts">
        <div class="post-section">
          <div class="section-header">
            <el-tag type="success" size="large" class="section-tag">
              <el-icon><User /></el-icon>
              农夫帖子
            </el-tag>
            <span class="section-count">{{ filteredFarmerPosts.length }} 条</span>
          </div>
          <div class="posts-list">
            <PostCard 
              v-for="post in filteredFarmerPosts" 
              :key="post.id"
              :post="post"
              :currentUser="currentUser"
              @like="handleLike"
              @dislike="handleDislike"
              @toggle-comments="toggleComments"
              @add-comment="handleAddComment"
              @add-reply="handleAddReply"
              @preview-image="previewImage"
              @follow-user="handleFollowUser"
              @view-user-profile="handleViewUserProfile"
            />
          </div>
        </div>
        
        <div v-if="filteredFarmerPosts.length === 0" class="empty-state">
          <el-empty description="暂无农夫帖子" />
        </div>
      </div>

      <!-- 仅买家帖子 -->
      <div v-else-if="selectedPostType === 'buyer'" class="single-type-posts">
        <div class="post-section">
          <div class="section-header">
            <el-tag type="primary" size="large" class="section-tag">
              <el-icon><ShoppingBag /></el-icon>
              买家帖子
            </el-tag>
            <span class="section-count">{{ filteredBuyerPosts.length }} 条</span>
          </div>
          <div class="posts-list">
            <PostCard 
              v-for="post in filteredBuyerPosts" 
              :key="post.id"
              :post="post"
              :currentUser="currentUser"
              @like="handleLike"
              @dislike="handleDislike"
              @toggle-comments="toggleComments"
              @add-comment="handleAddComment"
              @add-reply="handleAddReply"
              @preview-image="previewImage"
              @follow-user="handleFollowUser"
              @view-user-profile="handleViewUserProfile"
            />
          </div>
        </div>
        
        <div v-if="filteredBuyerPosts.length === 0" class="empty-state">
          <el-empty description="暂无买家帖子" />
        </div>
      </div>
    </div>

    <!-- 用户信息对话框 -->
    <el-dialog
      v-model="showUserProfile"
      :title="`用户信息 - ${selectedUser?.name || ''}`"
      width="600px"
      align-center
    >
      <UserProfile 
        v-if="selectedUser"
        :user="selectedUser"
        :user-posts="userPosts"
        @follow-user="handleProfileFollow"
      />
    </el-dialog>

    <!-- 图片预览对话框 -->
    <el-dialog
      v-model="showImagePreview"
      title="图片预览"
      width="600px"
      align-center
    >
      <div class="image-preview">
        <img :src="previewImageUrl" alt="预览图片" class="preview-img" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import PostCard from './PostCard.vue'
import UserProfile from './UserProfile.vue'

// 当前用户信息
const currentUser = ref({
  id: 10001,
  name: '当前用户',
  avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
  type: 'buyer' 
})

// 搜索关键词
const searchKeyword = ref('')

// 选择的帖子类型
const selectedPostType = ref('all')

// 图片预览
const showImagePreview = ref(false)
const previewImageUrl = ref('')

// 用户信息对话框
const showUserProfile = ref(false)
const selectedUser = ref(null)
const userPosts = ref([])

// UID搜索相关
const uidSearchKeyword = ref('')
const uidSearching = ref(false)
const searchState = ref({
  show: false,
  text: '',
  showClear: false
})

// 用户数据
const usersData = ref({
  // 农夫用户
  10002: {
    id: 10002,
    name: '张大山',
    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
    type: 'farmer',
    online: true,
    // 农夫特有信息
    plantingCategories: ['西红柿', '黄瓜', '草莓'],
    creditRating: 'AAA',
    farmArea: 50,
    plantingRegion: '山东省寿光市',
    lastRatingTime: '2024-01-10',
    plantingYears: 8,
    followers: 245,
    postsCount: 12,
    following: 56
  },
  10003: {
    id: 10003,
    name: '王技术员',
    avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
    type: 'farmer',
    online: false,
    plantingCategories: ['黄瓜', '辣椒'],
    creditRating: 'AA',
    farmArea: 30,
    plantingRegion: '河北省张家口市',
    lastRatingTime: '2024-01-08',
    plantingYears: 5,
    followers: 128,
    postsCount: 8,
    following: 34
  },
  10004: {
    id: 10004,
    name: '赵农场主',
    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
    type: 'farmer',
    online: true,
    plantingCategories: ['草莓', '蓝莓'],
    creditRating: 'AAA',
    farmArea: 80,
    plantingRegion: '浙江省杭州市',
    lastRatingTime: '2024-01-12',
    plantingYears: 12,
    followers: 356,
    postsCount: 15,
    following: 78
  },
  // 买家用户
  10005: {
    id: 10005,
    name: '陈采购',
    avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
    type: 'buyer',
    online: true,
    // 买家特有信息
    deliveryAddress: ['北京市朝阳区建国门外大街1号', '上海市浦东新区陆家嘴金融中心'],
    followers: 89,
    postsCount: 5,
    following: 123
  },
  10006: {
    id: 10006,
    name: '李超市',
    avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
    type: 'buyer',
    online: false,
    deliveryAddress: ['广州市天河区珠江新城', '深圳市南山区科技园'],
    followers: 156,
    postsCount: 7,
    following: 89
  }
})

// 帖子数据
const farmerPosts = ref([])
const buyerPosts = ref([])

// 计算属性
const totalPostsCount = computed(() => {
  return filteredFarmerPosts.value.length + filteredBuyerPosts.value.length
})

const farmerPostsCount = computed(() => filteredFarmerPosts.value.length)
const buyerPostsCount = computed(() => filteredBuyerPosts.value.length)

// 过滤后的帖子
const filteredFarmerPosts = computed(() => {
  let posts = farmerPosts.value
  
  // 内容搜索
  if (searchKeyword.value) {
    posts = posts.filter(post => 
      post.content.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      (post.keywords && post.keywords.some(keyword => 
        keyword.toLowerCase().includes(searchKeyword.value.toLowerCase())
      ))
    )
  }
  
  // UID搜索
  if (uidSearchKeyword.value) {
    posts = posts.filter(post => 
      post.author.id.toString().includes(uidSearchKeyword.value)
    )
  }
  
  return posts
})

const filteredBuyerPosts = computed(() => {
  let posts = buyerPosts.value
  
  // 内容搜索
  if (searchKeyword.value) {
    posts = posts.filter(post => 
      post.content.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      (post.keywords && post.keywords.some(keyword => 
        keyword.toLowerCase().includes(searchKeyword.value.toLowerCase())
      ))
    )
  }
  
  // UID搜索
  if (uidSearchKeyword.value) {
    posts = posts.filter(post => 
      post.author.id.toString().includes(uidSearchKeyword.value)
    )
  }
  
  return posts
})

// 用户UID搜索处理
const handleUidSearch = () => {
  if (!uidSearchKeyword.value.trim()) {
    ElMessage.warning('请输入用户UID')
    return
  }

  uidSearching.value = true
  
  // 模拟搜索延迟
  setTimeout(() => {
    const allPosts = [...farmerPosts.value, ...buyerPosts.value]
    const userPosts = allPosts.filter(post => 
      post.author.id.toString().includes(uidSearchKeyword.value.trim())
    )
    
    if (userPosts.length > 0) {
      const user = userPosts[0].author
      searchState.value = {
        show: true,
        text: `找到用户 ${user.name} (UID: ${user.id}) 的 ${userPosts.length} 条帖子`,
        showClear: true
      }
      ElMessage.success(`找到 ${userPosts.length} 条帖子`)
    } else {
      searchState.value = {
        show: true,
        text: `未找到UID为 ${uidSearchKeyword.value} 的用户帖子`,
        showClear: true
      }
      ElMessage.warning('未找到该用户的帖子')
    }
    
    uidSearching.value = false
  }, 500)
}

// 清除搜索
const clearSearch = () => {
  searchKeyword.value = ''
  uidSearchKeyword.value = ''
  searchState.value = {
    show: false,
    text: '',
    showClear: false
  }
}

// 搜索处理
const handleSearch = () => {
  if (searchKeyword.value) {
    searchState.value = {
      show: true,
      text: `搜索帖子内容: "${searchKeyword.value}"`,
      showClear: true
    }
  }
}

// 关注用户处理
const handleFollowUser = (followData) => {
  console.log('关注用户:', followData)
  ElMessage.success(followData.isFollowing ? '关注成功' : '已取消关注')
}

// 查看用户资料
const handleViewUserProfile = (userData) => {
  const user = usersData.value[userData.userId]
  if (user) {
    selectedUser.value = user
    // 获取用户发布的帖子
    userPosts.value = getUserPosts(userData.userId)
    showUserProfile.value = true
  }
}

// 从用户资料对话框关注
const handleProfileFollow = (followData) => {
  console.log('关注用户:', followData)
  ElMessage.success(followData.isFollowing ? '关注成功' : '已取消关注')
}

// 获取用户发布的帖子
const getUserPosts = (userId) => {
  const allPosts = [...farmerPosts.value, ...buyerPosts.value]
  return allPosts.filter(post => post.author.id === userId)
}

// 初始化数据
const initData = () => {
  // 农夫帖子数据
  farmerPosts.value = [
    {
      id: 1,
      author: {
        id: 10002,
        name: '张大山',
        avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
        type: 'farmer'
      },
      content: '今年的西红柿长势特别好，采用了新的有机种植技术，果实饱满多汁，欢迎大家来参观选购！',
      keywords: ['西红柿', '有机种植', '新鲜'],
      images: [
        'https://images.unsplash.com/photo-1546470427-e212b7d31075?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80'
      ],
      createTime: '2024-01-15T10:30:00Z',
      likes: 24,
      dislikes: 2,
      userAction: null,
      showComments: false,
      newComment: '',
      comments: [
        {
          id: 1,
          author: {
            id: 10005,
            name: '陈采购',
            avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
            type: 'buyer'
          },
          content: '看起来真不错！什么价格？',
          time: '2024-01-15T11:00:00Z',
          replies: [],
          replyText: ''
        }
      ]
    },
    {
      id: 2,
      author: {
        id: 10003,
        name: '王技术员',
        avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
        type: 'farmer'
      },
      content: '分享一个黄瓜种植的病虫害防治经验，最近天气变化大，要注意白粉病的预防。',
      keywords: ['黄瓜', '病虫害防治', '种植经验'],
      images: [
        'https://images.unsplash.com/photo-1571575173700-afb9492e6a50?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80'
      ],
      createTime: '2024-01-14T15:20:00Z',
      likes: 15,
      dislikes: 1,
      userAction: null,
      showComments: false,
      newComment: '',
      comments: []
    },
    {
      id: 3,
      author: {
        id: 10004,
        name: '赵农场主',
        avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
        type: 'farmer'
      },
      content: '新鲜采摘的草莓上市了，纯天然无农药，欢迎批发零售！',
      keywords: ['草莓', '新鲜采摘', '无农药'],
      images: [
        'https://images.unsplash.com/photo-1464454709131-ffd692591ee5?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80'
      ],
      createTime: '2024-01-15T14:00:00Z',
      likes: 32,
      dislikes: 0,
      userAction: null,
      showComments: false,
      newComment: '',
      comments: []
    }
  ]

  // 买家帖子数据
  buyerPosts.value = [
    {
      id: 4,
      author: {
        id: 10005,
        name: '陈采购',
        avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
        type: 'buyer'
      },
      content: '急需采购一批有机蔬菜，要求新鲜无农药，有稳定供货能力的农场请联系我！',
      keywords: ['有机蔬菜', '采购', '稳定供货'],
      images: [],
      createTime: '2024-01-15T09:15:00Z',
      likes: 8,
      dislikes: 0,
      userAction: null,
      showComments: false,
      newComment: '',
      comments: [
        {
          id: 2,
          author: {
            id: 10004,
            name: '赵农场主',
            avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
            type: 'farmer'
          },
          content: '我们农场有大量有机蔬菜供应，可以加微信详谈。',
          time: '2024-01-15T10:00:00Z',
          replies: [
            {
              id: 1,
              author: {
                id: 10005,
                name: '陈采购',
                avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
                type: 'buyer'
              },
              content: '好的，已发送好友申请！',
              time: '2024-01-15T10:05:00Z'
            }
          ],
          replyText: ''
        }
      ]
    },
    {
      id: 5,
      author: {
        id: 10006,
        name: '李超市',
        avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
        type: 'buyer'
      },
      content: '寻找优质水果供应商，特别是苹果和梨子，要求品质稳定，量大从优。',
      keywords: ['水果供应商', '苹果', '梨子'],
      images: [],
      createTime: '2024-01-14T16:30:00Z',
      likes: 12,
      dislikes: 1,
      userAction: null,
      showComments: false,
      newComment: '',
      comments: []
    }
  ]
}

// 帖子类型切换
const handlePostTypeChange = (type) => {
  console.log('切换到帖子类型:', type)
}

// 点赞处理
const handleLike = (postId) => {
  const allPosts = [...farmerPosts.value, ...buyerPosts.value]
  const post = allPosts.find(p => p.id === postId)
  if (post) {
    if (post.userAction === 'like') {
      post.likes--
      post.userAction = null
    } else {
      if (post.userAction === 'dislike') {
        post.dislikes--
      }
      post.likes++
      post.userAction = 'like'
    }
  }
}

// 点踩处理
const handleDislike = (postId) => {
  const allPosts = [...farmerPosts.value, ...buyerPosts.value]
  const post = allPosts.find(p => p.id === postId)
  if (post) {
    if (post.userAction === 'dislike') {
      post.dislikes--
      post.userAction = null
    } else {
      if (post.userAction === 'like') {
        post.likes--
      }
      post.dislikes++
      post.userAction = 'dislike'
    }
  }
}

// 切换评论显示
const toggleComments = (postId) => {
  const allPosts = [...farmerPosts.value, ...buyerPosts.value]
  const post = allPosts.find(p => p.id === postId)
  if (post) {
    post.showComments = !post.showComments
  }
}

// 评论处理
const handleAddComment = (commentData) => {
  const { postId, content, author } = commentData
  
  let post = farmerPosts.value.find(p => p.id === postId)
  if (!post) {
    post = buyerPosts.value.find(p => p.id === postId)
  }
  
  if (post) {
    const newComment = {
      id: Date.now(),
      author: {
        id: author.id,
        name: author.name,
        avatar: author.avatar,
        type: author.type
      },
      content: content,
      time: new Date().toISOString(),
      replies: [],
      replyText: ''
    }
    
    if (!post.comments) {
      post.comments = []
    }
    
    post.comments.push(newComment)
  }
}

// 回复处理
const handleAddReply = (replyData) => {
  const { postId, commentId, content, author } = replyData
  
  let post = farmerPosts.value.find(p => p.id === postId)
  if (!post) {
    post = buyerPosts.value.find(p => p.id === postId)
  }
  
  if (post && post.comments) {
    const comment = post.comments.find(c => c.id === commentId)
    if (comment) {
      const newReply = {
        id: Date.now(),
        author: {
          id: author.id,
          name: author.name,
          avatar: author.avatar,
          type: author.type
        },
        content: content,
        time: new Date().toISOString()
      }
      
      if (!comment.replies) {
        comment.replies = []
      }
      
      comment.replies.push(newReply)
    }
  }
}

// 图片预览
const previewImage = (imageUrl) => {
  previewImageUrl.value = imageUrl
  showImagePreview.value = true
}

onMounted(() => {
  initData()
})
</script>

<style scoped>
.community-home {
  min-height: 100vh;
  background: #f8fafc;
}

/* 搜索头部布局 */
.search-header {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.search-box, .uid-search-box {
  display: flex;
  flex: 1;
  min-width: 300px;
}

.search-box input, .uid-search-box input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px 0 0 6px;
  font-size: 1rem;
  transition: border 0.3s;
}

.search-box input:focus, .uid-search-box input:focus {
  border-color: #4CAF50;
  outline: none;
}

.search-box button, .uid-search-box button {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 0 20px;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  transition: background 0.3s;
  white-space: nowrap;
}

.uid-search-box button {
  background: #67C23A;
}

.search-box button:hover {
  background: #388E3C;
}

.uid-search-box button:hover {
  background: #5DAF34;
}

/* 搜索状态显示 */
.search-state {
  background: #f0f9ff;
  border: 1px solid #e1f5fe;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.search-state-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-state-text {
  color: #0288d1;
  font-weight: 500;
}

.clear-search-btn {
  color: #666;
  font-size: 0.875rem;
}

.clear-search-btn:hover {
  color: #4CAF50;
}

/* 筛选区域 */
.filter-section {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  padding: 16px 0;
}

.filter-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.post-stats {
  display: flex;
  align-items: center;
}

/* 帖子容器 */
.posts-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 24px 20px;
}

.post-section {
  margin-bottom: 32px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
}

.section-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.section-count {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

/* 帖子列表 */
.posts-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

/* 图片预览 */
.image-preview {
  text-align: center;
}

.preview-img {
  max-width: 100%;
  max-height: 400px;
  border-radius: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-header {
    flex-direction: column;
  }
  
  .search-box, .uid-search-box {
    min-width: 100%;
  }
  
  .filter-container {
    padding: 0 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .posts-container {
    padding: 16px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>